<template>
  <div class="student-matching-page">
    <!-- 课题匹配页面 -->
    <div v-if="isProjectsMatching" class="student-matching">
      <!-- 页面标题 -->
      <div class="page-header">
        <h1>课题匹配</h1>
        <p>结合专业、研究领域，为学生匹配课题</p>
      </div>
      
      <!-- 匹配课题列表 -->
      <div class="projects-section">
        <el-row :gutter="20">
          <el-col
          v-for="project in matchingProjects"
          :key="project.id"
          :xs="24"
          :sm="12"
          :md="8"
          :lg="6"
          >
            <el-card class="topic-card" shadow="hover">
              <div class="topic-header">
                <h3 class="topic-title">{{ project.title }}</h3>
                <el-tag :type="getStatusType(project.status)" size="small">
                    {{ project.status }}
                  </el-tag>
              </div>

              <div class="topic-content">
                <p class="topic-description">{{ project.description }}</p>

                <div class="topic-info">
                    <div class="info-item">
                        <el-icon><OfficeBuilding /></el-icon>
                        <span>{{ project.enterprise }}</span>
                    </div>
                    <div class="info-item">
                        <el-icon><Collection /></el-icon>
                        <span>{{ project.category }}</span>
                    </div>
                    <div class="info-item">
                        <el-icon><Money /></el-icon>
                        <span>{{ project.budget || '面议' }}</span>
                    </div>
                </div>

                <div class="student-progress">
                <div class="progress-item">
                    <span>匹配度</span>
                    <el-progress :percentage="project.matchingPercent" :color="getProgressColor(project.matchingPercent)" />
                </div>
                </div>
              </div>

              <div class="topic-actions">
                <el-button
                type="primary"
                @click="showApplyDialog(project)"
                :disabled="project.hasApplied"
                >
                {{ project.hasApplied ? '已申请' : '申请课题' }}
                </el-button>

                <el-button @click="showTopicDetail(project)">
                查看详情
                </el-button>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>  

    <!-- 默认页面 -->
    <div v-else class="default-page">
      <div class="page-header">
        <h1>学生课题匹配</h1>
        <p>请选择左侧菜单进入相应功能模块</p>
      </div>
    </div>

    <!-- 申请课题对话框 -->
    <el-dialog
      v-model="applyDialogVisible"
      title="申请课题"
      width="700px"
      :before-close="handleCloseApplyDialog"
    >
      <el-form
        :model="applyForm"
        :rules="applyRules"
        ref="applyFormRef"
        label-width="100px"
        label-position="top"
      >
        <el-form-item label="课题名称">
          <el-input :model-value="currentTopic?.title || ''" disabled />
        </el-form-item>

        <el-form-item label="企业名称">
          <el-input :model-value="currentTopic?.enterprise || ''" disabled />
        </el-form-item>

        <el-form-item label="申请信" prop="coverLetter">
          <el-input
            v-model="applyForm.coverLetter"
            type="textarea"
            :rows="4"
            placeholder="请简要描述你的申请动机和相关经验..."
          />
        </el-form-item>

        <el-form-item label="研究计划" prop="researchPlan">
          <el-input
            v-model="applyForm.researchPlan"
            type="textarea"
            :rows="4"
            placeholder="请简要描述你的研究计划..."
          />
        </el-form-item>

        <el-form-item label="申请动机" prop="motivation">
          <el-input
            v-model="applyForm.motivation"
            type="textarea"
            :rows="2"
            placeholder="请简要描述你的申请动机..."
          />
        </el-form-item>

        <el-form-item label="资质说明" prop="qualifications">
          <el-input
            v-model="applyForm.qualifications"
            type="textarea"
            :rows="2"
            placeholder="请简要描述你的相关资质..."
          />
        </el-form-item>

        <el-form-item label="预期投入时间(小时/周)" prop="expectedTime">
          <el-input-number
            v-model="applyForm.expectedTime"
            :min="1"
            :max="40"
            controls-position="right"
          />
        </el-form-item>

        <el-form-item label="可开始时间" prop="startDate">
          <el-date-picker
            v-model="applyForm.startDate"
            type="date"
            placeholder="选择可开始日期"
            style="width: 100%"
          />
        </el-form-item>

        <el-form-item label="可结束时间" prop="endDate">
          <el-date-picker
            v-model="applyForm.endDate"
            type="date"
            placeholder="选择可结束日期"
            style="width: 100%"
          />
        </el-form-item>

        <el-form-item label="作品集链接" prop="portfolio">
          <el-input v-model="applyForm.portfolio" placeholder="请输入作品集链接" />
        </el-form-item>

        <el-form-item label="简历链接" prop="resume">
          <el-input v-model="applyForm.resume" placeholder="请输入简历链接" />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="applyDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitApplication">提交申请</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 课题详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="课题详情"
      width="800px"
    >
      <div v-if="currentTopic" class="topic-detail">
        <h2>{{ currentTopic.title }}</h2>
        <p class="detail-description">{{ currentTopic.description }}</p>

        <el-descriptions :column="2" border>
          <el-descriptions-item label="企业名称">{{ currentTopic.enterprise || '未知企业' }}</el-descriptions-item>
          <el-descriptions-item label="课题分类">{{ currentTopic.category }}</el-descriptions-item>
          <el-descriptions-item label="预算">{{ currentTopic.budget || '面议' }}元</el-descriptions-item>
          <el-descriptions-item label="截止日期">{{ formatDate(currentTopic.deadline) }}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="getStatusType(currentTopic.status)">
              {{ currentTopic.statusText }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="是否公开">
            <el-tag :type="currentTopic.is_public ? 'success' : 'warning'">
              {{ currentTopic.is_public ? '公开' : '私有' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="浏览次数">{{ currentTopic.view_count || 0 }}</el-descriptions-item>
          <el-descriptions-item label="申请次数">{{ currentTopic.apply_count || 0 }}</el-descriptions-item>
          <el-descriptions-item label="发布时间">{{ currentTopic.publishTime }}</el-descriptions-item>
        </el-descriptions>

        <div class="detail-section">
          <h3>具体要求</h3>
          <div class="requirements-list">
            <p v-for="(req, index) in getRequirementsList(currentTopic.requirements)" :key="index">
              {{ index + 1 }}. {{ req }}
            </p>
          </div>
        </div>

        <div class="detail-section" v-if="currentTopic.tags">
          <h3>标签</h3>
          <div class="tags-container">
            <el-tag v-for="tag in currentTopic.tags.split(',')" :key="tag" class="tag-item">
              {{ tag.trim() }}
            </el-tag>
          </div>
        </div>

        <div class="detail-section" v-if="currentTopic.contact_info">
          <h3>联系方式</h3>
          <p>{{ currentTopic.contact_info }}</p>
        </div>

        <div class="detail-section" v-if="currentTopic.skills">
          <h3>技能要求</h3>
          <p>{{ currentTopic.skills }}</p>
        </div>

        <div class="detail-section" v-if="currentTopic.location">
          <h3>工作地点</h3>
          <p>{{ currentTopic.location }}</p>
        </div>

        <div class="detail-section" v-if="currentTopic.duration">
          <h3>项目周期</h3>
          <p>{{ currentTopic.duration }}天</p>
        </div>

        <div class="detail-section" v-if="currentTopic.content">
          <h3>项目内容</h3>
          <p>{{ currentTopic.content }}</p>
        </div>

        <div class="detail-section" v-if="currentTopic.expectedOutcome">
          <h3>预期成果</h3>
          <p>{{ currentTopic.expectedOutcome }}</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import * as studentApi from '@/api/student'
import { 
  School,
  Phone,
  Message,
  Check,
  User,
  OfficeBuilding,
  Calendar,
  Timer,
  Plus,
  Money,
  Collection,
  Refresh,
  Search,
} from '@element-plus/icons-vue';

const userId = localStorage.getItem('userId');
const storedUserId = localStorage.getItem('userId');
console.log('userId：', storedUserId);
const numericUserId = storedUserId ? parseInt(storedUserId, 10) : null;
console.log('数字类型的 userId：', numericUserId);

// 判断当前页面类型
const isProjectsMatching = ref(true);

// 进度条颜色获取
const getProgressColor = (percentage: number) => {
  if (percentage >= 80) return '#67c23a';
  if (percentage >= 60) return '#e6a23c';
  if (percentage >= 40) return '#f56c6c';
  return '#909399';
};

const router = useRouter()
const currentUser = ref<studentApi.Project | null>(null)

// 分页
const currentPage = ref(1)
const pageSize = ref(12)
const totalTopics = ref(0)

// 对话框状态
const applyDialogVisible = ref(false)
const detailDialogVisible = ref(false)
const currentTopic = ref<studentApi.Project | null>(null)
const currentApplication = ref<studentApi.Application | null>(null)

// 申请表单
const applyForm = reactive({
  coverLetter: '',
  researchPlan: '',
  motivation: '',
  qualifications: '',
  expectedTime: 10,
  startDate: '',
  endDate: '',
  portfolio: '',
  resume: ''
})

// 表单验证规则
const applyRules = {
  coverLetter: [
    { required: true, message: '请输入申请信', trigger: 'blur' }
  ],
  researchPlan: [
    { required: true, message: '请输入研究计划', trigger: 'blur' }
  ],
  portfolio: [
    { required: true, message: '请输入作品集链接', trigger: 'blur' }
  ],
  resume: [
    { required: true, message: '请输入简历链接', trigger: 'blur' }
  ],
  expectedTime: [
    { required: true, message: '请输入预期投入时间', trigger: 'blur' }
  ],
  startDate: [
    { required: true, message: '请选择可开始时间', trigger: 'change' }
  ],
  endDate: [
    { required: true, message: '请选择可结束时间', trigger: 'change' }
  ]
}

const matchingProjects = [
  {
    id: 1,
    title: '基于深度学习的图像识别系统',
    description: '开发一个基于卷积神经网络的图像识别系统，用于工业质检场景中的缺陷检测。系统需要实现高精度的缺陷识别，支持多种工业产品的质量检测。',
    studentName: '张明',
    studentId: '2021001001',
    enterprise: '华为技术有限公司',
    mentor: '李教授',
    startDate: '2023-10-01',
    endDate: '2024-06-30',
    status: 'ongoing',
    statusText: '进行中',
    matchingPercent: 70,
    budget: 50000,
    category: '人工智能',
    hasApplied:false,
    milestones: [
      { id: 1, name: '需求分析与技术方案设计', date: '2023-10-15', completed: true },
      { id: 2, name: '数据集收集与预处理', date: '2023-11-30', completed: true },
      { id: 3, name: '模型训练与优化', date: '2024-01-15', completed: true },
      { id: 4, name: '系统集成与测试', date: '2024-03-31', completed: false },
      { id: 5, name: '部署与验收', date: '2024-06-30', completed: false }
    ],
    lastReport: '2024-01-10',
    nextMeeting: '2024-01-25'
  },
  {
    id: 2,
    title: '企业级微服务架构设计与实现',
    description: '为某电商平台设计并实现微服务架构，包括服务拆分、API网关、配置中心等核心组件。项目旨在提高系统的可扩展性和维护性。',
    studentName: '李华',
    studentId: '2021001002',
    enterprise: '腾讯科技',
    mentor: '王教授',
    startDate: '2023-11-01',
    endDate: '2024-08-31',
    status: 'ongoing',
    statusText: '进行中',
    matchingPercent: 45,
    budget: 60000,
    category: '软件工程',
    hasApplied:false,
    milestones: [
      { id: 1, name: '架构设计评审', date: '2023-11-15', completed: true },
      { id: 2, name: '核心服务开发', date: '2024-02-28', completed: false },
      { id: 3, name: 'API网关集成', date: '2024-04-30', completed: false },
      { id: 4, name: '性能测试与优化', date: '2024-06-30', completed: false },
      { id: 5, name: '生产环境部署', date: '2024-08-31', completed: false }
    ],
    lastReport: '2024-01-05',
    nextMeeting: '2024-01-20'
  },
  {
    id: 3,
    title: '大数据平台用户行为分析',
    description: '构建大数据分析平台，对用户行为数据进行实时处理和分析，为企业决策提供数据支持。平台需要支持PB级数据处理能力。',
    studentName: '王芳',
    studentId: '2022001001',
    enterprise: '阿里巴巴集团',
    mentor: '张教授',
    startDate: '2023-12-01',
    endDate: '2024-09-30',
    status: 'ongoing',
    statusText: '进行中',
    matchingPercent: 30,
    budget: 45000,
    category: '大数据',
    hasApplied:false,
    milestones: [
      { id: 1, name: '数据源调研与接入', date: '2023-12-20', completed: true },
      { id: 2, name: '数据清洗与预处理', date: '2024-02-15', completed: false },
      { id: 3, name: '实时计算框架搭建', date: '2024-04-30', completed: false },
      { id: 4, name: '分析模型开发', date: '2024-07-15', completed: false },
      { id: 5, name: '可视化展示系统', date: '2024-09-30', completed: false }
    ],
    lastReport: '2024-01-12',
    nextMeeting: '2024-01-28'
  },
  {
    id: 4,
    title: '网络安全态势感知系统',
    description: '开发网络安全态势感知系统，实现网络威胁检测、风险评估和预警功能。系统需要具备实时监控和智能分析能力。',
    studentName: '刘强',
    studentId: '2021001003',
    enterprise: '奇安信科技',
    mentor: '陈教授',
    startDate: '2022-09-01',
    endDate: '2023-12-31',
    status: 'completed',
    statusText: '已完成',
    matchingPercent: 100,
    budget: 55000,
    category: '网络安全',
    hasApplied:false,
    milestones: [
      { id: 1, name: '系统架构设计', date: '2022-10-15', completed: true },
      { id: 2, name: '威胁检测算法开发', date: '2023-03-31', completed: true },
      { id: 3, name: '风险评估模型', date: '2023-06-30', completed: true },
      { id: 4, name: '系统集成测试', date: '2023-09-30', completed: true },
      { id: 5, name: '项目验收与交付', date: '2023-12-31', completed: true }
    ],
    lastReport: '2023-12-20',
    nextMeeting: '已完成'
  },
  {
    id: 5,
    title: '智能推荐系统优化研究',
    description: '基于深度学习的推荐系统优化，提高推荐准确率和用户满意度。研究内容包括协同过滤、内容推荐和混合推荐算法。',
    studentName: '陈静',
    studentId: '2022001002',
    enterprise: '字节跳动',
    mentor: '李教授',
    startDate: '2024-01-01',
    endDate: '2024-12-31',
    status: 'ongoing',
    statusText: '进行中',
    matchingPercent: 25,
    budget: 40000,
    category: '人工智能',
    hasApplied:false,
    milestones: [
      { id: 1, name: '文献调研与方案设计', date: '2024-01-31', completed: false },
      { id: 2, name: '数据收集与特征工程', date: '2024-03-31', completed: false },
      { id: 3, name: '模型训练与调优', date: '2024-07-31', completed: false },
      { id: 4, name: 'A/B测试与效果评估', date: '2024-10-31', completed: false },
      { id: 5, name: '论文撰写与答辩', date: '2024-12-31', completed: false }
    ],
    lastReport: '2024-01-08',
    nextMeeting: '2024-01-22'
  }
];


// 课题数据
//const matchingProjects = ref<studentApi.Project[]>([])
// 申请数据
const applications = ref<studentApi.Application[]>([])
// 我的项目数据
const myProjects = ref<studentApi.MyProject[]>([])
// 学习资源数据
const resources = ref<studentApi.Resource[]>([])
// 过滤后的课题列表
const filteredTopics = ref<studentApi.Project[]>([])

//const filteredTopics = computed(() => {
  //return topics.value
//})

// 过滤后的申请列表
const filteredApplications = computed(() => {
  if (!applicationStatus.value) {
    return applications.value
  }
  return applications.value.filter(app => app.status === applicationStatus.value)
})

// 获取状态类型
const getStatusType = (status: string) => {
  const typeMap: Record<string, string> = {
    open: 'success',
    pending: 'warning',
    closed: 'info',
    in_progress: 'primary',
    completed: 'success'
  }
  return typeMap[status] || 'info'
}

const getProjectStatusType = (status: string) => {
  const typeMap: Record<string, string> = {
    ongoing: 'primary',
    completed: 'success',
    pending: 'info',
    problem: 'danger'
  }
  return typeMap[status] || 'info'
}

// 处理requirements数据，确保返回数组格式
const getRequirementsList = (requirements: any): string[] => {
  if (!requirements) return []
  
  if (Array.isArray(requirements)) {
    return requirements.filter(req => req && req.trim())
  }
  
  if (typeof requirements === 'string') {
    // 按换行符分割，过滤空行
    return requirements.split('\n').map(req => req.trim()).filter(req => req)
  }
  
  return []
}

// 加载匹配课题列表


// 加载申请列表
const loadApplications = async () => {
  try {
    const params = {
      page: currentPage.value,
      size: pageSize.value
    }

    const response = await studentApi.getMyApplications(params)
    // 根据API文档，返回结构是 { code, message, data: [], total, page, size, pages }
    applications.value = (response as any).data.map((app: any) => ({
      ...app,
      topicTitle: app?.project?.title || '未知课题',
      enterprise: app?.project?.enterprise_id?.toString() || '未知企业',
      applyTime: formatDate(app.apply_date || app.created_at || ''),
      statusText: getApplicationStatusText(app.status),
      feedback: app.review_comment || '',
      start_date: formatDate(app.start_date || ''),
      end_date: formatDate(app.end_date || '')
    }))
    console.log("加载申请列表：",applications.value)
  } catch (error) {
    ElMessage.error('加载申请列表失败')
  }
}

// 提取所有已申请的项目ID
const getAppliedProjectIds = (): ( number)[] => {
  if (!applications.value || applications.value.length === 0) return []
  return applications.value.map(app => app.project_id).filter(id => id !== undefined && id !== null)
}

// 检查项目是否处于待审核中的申请
const checkIfApplied = (projectId: number): boolean => {
  if (!applications.value || applications.value.length === 0) {
    return false;
  }
  
  // 查找状态为"pending"且项目ID匹配的申请
  return applications.value.some(app => 
    app.project_id !== undefined && 
    app.project_id !== null &&
    app.project_id.toString() === projectId.toString() &&
    app.status === "pending"
  );
};

// 获取状态文本
const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    open: '开放',
    closed: '已关闭',
    in_progress: '进行中',
    completed: '已完成'
  }
  return statusMap[status] || status
}

const getApplicationStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    pending: '待审核',
    accepted: '已通过',
    rejected: '已拒绝',
    withdrawn: '已撤回'
  }
  return statusMap[status] || status
}

const getProjectStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    ongoing: '进行中',
    completed: '已完成',
    pending: '待开始',
    problem: '有问题'
  }
  return statusMap[status] || status
}

// 格式化日期
const formatDate = (dateStr: string) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  return date.toLocaleDateString()
}

// 显示申请对话框
const showApplyDialog = (topic: studentApi.Project) => {
  currentTopic.value = topic
  applyDialogVisible.value = true
  // 重置表单
  applyForm.coverLetter = ''
  applyForm.researchPlan = ''
  applyForm.motivation = ''
  applyForm.qualifications = ''
  applyForm.expectedTime = 10
  applyForm.startDate = ''
  applyForm.endDate = ''
  applyForm.portfolio = ''
  applyForm.resume = ''
}

// 显示课题详情
const showTopicDetail = async (topic: studentApi.Project) => {
  try {
    const response = await studentApi.getProjectDetail(topic.id)
    currentTopic.value = {
      ...topic,
      ...response
    }
    detailDialogVisible.value = true
  } catch (error) {
    ElMessage.error('获取课题详情失败')
  }
}

// 关闭申请对话框
const handleCloseApplyDialog = () => {
  applyDialogVisible.value = false
}

// 提交申请
const submitApplication = async () => {
  try {
    if (!currentTopic.value) return

    const requestData = {
      project_id: currentTopic.value.id,
      cover_letter: applyForm.coverLetter,
      portfolio: applyForm.portfolio,
      resume: applyForm.resume,
      motivation: applyForm.motivation,
      qualifications: applyForm.qualifications,
      research_plan: applyForm.researchPlan,
      expected_time: parseInt(applyForm.expectedTime.toString()),
      start_date: applyForm.startDate ? new Date(applyForm.startDate).toISOString() : undefined,
      end_date: applyForm.endDate ? new Date(applyForm.endDate).toISOString() : undefined
    }

    const response = await studentApi.createApplication(requestData)

    if ((response as any).code === 200) {
      ElMessage.success('申请提交成功！')
      applyDialogVisible.value = false
      // 刷新申请列表
      await loadApplications()
      //刷新课题列表
      await loadMatchingProjects()
    } else {
      ElMessage.error((response as any).message || '申请提交失败')
    }
  } catch (error) {
    ElMessage.error('申请提交失败，请重试')
  }
}

// 查看项目详情
const viewProjectDetail = (project: studentApi.MyProject) => {
  ElMessage.info(`查看项目 ${project.title} 的详细信息`)
}

// 查看学习资源
const viewResource = (resource: studentApi.Resource) => {
  ElMessage.info(`查看学习资源 ${resource.title}`)
}

// 下载学习资源
const downloadResource = (resource: studentApi.Resource) => {
  ElMessage.success(`开始下载 ${resource.title}`)
}

// 分页处理
const handleSizeChange = (val: number) => {
  pageSize.value = val
  currentPage.value = 1
  loadMatchingProjects()
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  loadMatchingProjects()
}

// 初始化加载数据
onMounted(async () => {
  await loadApplications()
  //await loadMatchingProjects()
  //await loadMyProjects()
})
</script>

<style scoped>
.student-matching-page {
  padding: 20px;
}

.page-header {
  margin-bottom: 24px;
  text-align: center;
}

.page-header h1 {
  color: #045108;
  margin-bottom: 8px;
  font-size: 28px;
  font-weight: 600;
}

.page-header p {
  color: #666;
  font-size: 16px;
}

/* 学生管理页面样式 */
.student-matching {
  padding: 20px;
}

.topic-card {
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.topic-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.topic-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.topic-title {
  margin: 0;
  font-size: 18px;
  color: #045108;
  flex: 1;
  margin-right: 12px;
}

.topic-content {
  margin-bottom: 20px;
}

.topic-description {
  color: #666;
  margin-bottom: 16px;
  line-height: 1.6;
}

.topic-info {
  margin-bottom: 16px;
  padding: 0px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
  font-size: 14px;
}

.topic-requirements {
  margin-bottom: 16px;
}

.topic-requirements h4 {
  margin: 0 0 8px 0;
  color: #045108;
  font-size: 14px;
}

.topic-requirements ul {
  margin: 0;
  padding-left: 20px;
  color: #666;
  font-size: 14px;
}

.topic-requirements li {
  margin-bottom: 4px;
}

.topic-actions {
  display: flex;
  gap: 12px;
}

.student-progress {
  margin-bottom: 16px;
  padding: 0 16px;
}

.progress-item {
  margin-bottom: 12px;
}

.progress-item span {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

/* 默认页面样式 */
.default-page {
  padding: 20px;
  text-align: center;
}

.default-page .page-header {
  margin-top: 100px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .student-actions,
  .project-actions {
    flex-direction: column;
  }

  .student-actions .el-button,
  .project-actions .el-button {
    width: 100%;
  }

  .project-info {
    grid-template-columns: 1fr;
  }

  .student-header {
    flex-direction: column;
    text-align: center;
  }

  .project-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 576px) {
  .student-matching-page {
    padding: 10px;
  }

  .page-header h1 {
    font-size: 24px;
  }

  .page-header p {
    font-size: 14px;
  }
}
</style>
